<template>
  <div class="page">
    <div style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
      ">
      <div style="display: flex; align-items: center">
        <div style="font-size: 26px">
          {{ $t("mine.grsz") }}
        </div>
        <div style="width: 12px"></div>
        <i
          class="Icon"
          style="font-size: 20px"
          @click="editHandle()"
        >edit</i>
      </div>
      <div
        style="font-size: 26px"
        @click="logoutHandle()"
      >
        {{ $t("mine.tc") }}
      </div>
    </div>

    <div class="body">
      <!-- card -->
      <div style="margin-top: 40px">
        <div class="card">
          <!-- item -->
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 12px;
              border-bottom: 1px solid #ebebeb;
            "
            v-for="(ikey, index) in Object.keys(info)"
            :key="index"
          >
            <div style="display: flex;align-items: center;">
              <div :style="{'width': '28px','height': '28px','backgroundColor': `${icons[index].color}`,'borderRadius': '4px','marginRight': '6px','display': 'flex','justifyContent': 'center','alignItems': 'center'}">
                <i
                  class="Icon"
                  style="color: #ffffff;font-size: 20px;"
                >{{icons[index].icon}}</i>
              </div>
              <div style="font-size: 16px">{{ keys[index] }}</div>
            </div>
            <div style="color: #999999; font-size: 14px">{{ info[ikey] }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {},
  data() {
    return {
      keys: [
        this.$t("mine.m"),
        this.$t("mine.x"),
        this.$t("mine.xb"),
        this.$t("mine.csny"),
        this.$t("mine.yj"),
        this.$t("mine.dhhm"),
      ],

      icons: [
        { color: "orange", icon: "person" },
        { color: "#60ABFC", icon: "badge" },
        { color: "#31D3EB", icon: "transgender" },
        { color: "#5BC59E", icon: "date_range" },
        { color: "#FF7A7B", icon: "mail" },
        { color: "#9287E7", icon: "phone_iphone" },
      ],
      info: {
        name: "jeking",
        xing: "su",
        gender: 1,
        birthday: "1990-01-01",
        email: "sujeking@gmail.com",
        phone: "123456789",
      },
    };
  },
  methods: {
    logoutHandle() {
      localStorage.setItem("login", "0");
      this.$router.replace({
        path: "/login",
      });
    },
    editHandle() {
      this.$router.push({
        path: "/mineedit",
      });
    },
  },
};
</script>


<style scoped>
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  padding: 12px;
}

.body {
  flex: 1;
}
</style>